<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>消耗品领用-云校通_教师版</title>
<meta name="viewport"
	content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="<%=basePath%>/style/icon.css" />
<link rel="stylesheet" href="<%=basePath%>/style/weui.css" />
<link rel="stylesheet" href="<%=basePath%>/style/weui4.css" />
<link rel="stylesheet" href="<%=basePath%>/style/weui5.css" />
<link rel="stylesheet" href="<%=basePath%>/style/weui_parents.css" />
<style>
.hb_choose {
	top: 50% !important;
	margin-top: -156px !important;
}

.no_border {
	border: none !important;
	height: 180px;
}

.no_border .atype {
	width: 100%;
}

.no_border textarea {
	width: 84%;
	min-height: 80px;
	margin-left: 11%;
	margin-top: 4px;
	border-radius: 4px;
	background: #f8f8f8;
	border: 1px solid #d9d9d9;
	outline: none;
	padding-top: 10px;
	text-indent: 14px;
}

.ry_add_main {
	margin-bottom: 10px;
	background: #fff;
}

.ry_add_main ul {
	width: 100%;
	clear: both;
	display: inline-block;
	border-bottom: 1px solid #ededed;
}

.ry_add_main li {
	display: inline-block;
	float: left;
	height: 42px;
}

.ry_add_main li img {
	margin-left: 10px;
	margin-top: 12px;
	width: 18px;
	height: 18px;
}

.ry_add_main li p {
	margin-left: 10px;
	line-height: 42px;
}

.ry_add_main li input {
	position: absolute;
	right: 4%;
	border-style: none;
	outline-style: none;
	width: 60%;
	height: 42px;
	font-size: inherit;
	color: #d0d0d0;
}

.input_select {
	text-align: right;
	text-transform: none;
}

.weui_btn_area {
	margin-top: 40px;
}

.sc_width {
	position: absolute;
	right: 20px;
	display: block;
	width: 60%;
}

.sc_btn {
	position: relative;
	left: 80%;
	top: 14px;
	width: 46px;
	height: 22px;
	background: #10ffae;
	line-height: 22px;
	text-align: center;
	border-radius: 4px;
	font-size: 16px;
	color: #fff;
}

#form {
	position: relative;
	top: -10px;
}

.sc_dispear {
	margin-top: 8px;
	opacity: 0;
}

.line {
	position: relative;
	top: -8px;
	width: 100%;
	height: 1px;
	background: #ccc;
}

.hb_choose ul li {
	color: #81cbf6;
	text-align: center;
	height: 42px;
	line-height: 42px;
	border-top: 1px solid #ededed;
}
</style>
</head>
<body>
	<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
	<div class="weui-header bg-blue">
		<div class="weui-header-left">
			<a onclick="back()" class="icon icon-109 f-white">返回</a>
		</div>
		<h1 class="weui-header-title">新建申请</h1>
	</div>
	<div id="main" style="padding-bottom: 20%;">
	
		<div class="hide_bd" id="div1" v-bind:style="{display:flag.alertOrHiddenBackgrond}"></div>
		<div class="hb_choose" id="div2" v-bind:style="{display:flag.alertOrHiddenTypeOption}">
			<h1>请选择</h1>
			<ul v-for="item in types">
				<li v-on:click="hiddenDiv($event,'0')" :id="item.id" :value="item.cycleUse">{{item.typeName}}</li>
			</ul>
		</div>
		<div class="hb_choose" id="div3" v-bind:style="{display:flag.alertOrHiddenNameOption}">
			<h1>请选择</h1>
			<ul v-for="item in names">
			  <li v-on:click="hiddenDiv($event,'1')" :id="item.id">{{item.goodsName}}</li>
			</ul>
		</div>
		<div class="hb_choose" id="div4" v-bind:style="{display:flag.alertOrHiddenAttrOption}">
			<h1>请选择</h1>
			<ul v-for="item in attrs">
				<li v-on:click="hiddenDiv($event,'2')" :id="item.id">{{item.googsAttr}}</li>
			</ul>
		</div>

		<div class="ry_add_main">
			<ul>
				<li><img src="<%=basePath%>/images/lingyongren@2x.png"></li>
				<li><p>领用人</p></li>
				<li><input class="input_select" type="text" placeholder="请输入姓名"  v-model="post_form.usedName"></li>
			</ul>
<%-- 			<ul>
				<li><img src="<%=basePath%>/images/cunfangdiand@2x.png"></li>
				<li><p>使用地点</p></li>
				<li><input class="input_select" type="text" placeholder="请输入地点" v-model="post_form.usedPlace"></li>
			</ul>
 --%>			<ul id="sBtn">
				<li><img src="<%=basePath%>/images/wupinleib@2x.png"></li>
				<li><p>物品类别</p></li>
				<li><input class="input_select" id="input3" placeholder="请选择 >" v-on:click="alertDiv('0')" v-model="post_form.typeName"
					readonly="readonly"></li>
			</ul>
			<ul id="aBtn">
				<li><img src="<%=basePath%>/images/wupinmingc@2x.png"></li>
				<li><p>物品名称</p></li>
				<li><input class="input_select" id="input4" type="text" v-on:click="alertDiv('1')" v-model="post_form.goodsName"
					readonly="readonly" placeholder="请选择 >"></li>
			</ul>
			<ul id="bBtn">
				<li><img src="<%=basePath%>/images/xinghao@2x.png"></li>
				<li><p>型号</p></li>
				<li><input class="input_select" id="input5" type="text" v-on:click="alertDiv('2')" v-model="post_form.goodsAttr"
					readonly="readonly" placeholder="请选择 >"></li>
			</ul>
			<ul>
				<li><img src="<%=basePath%>/images/huojiangshijian@3x.png"></li>
				<li><p>可用库存</p></li>
				<li><input readonly="readonly" class="input_select" type="text" v-model="stock"/></li>
			</ul>
			<ul>
				<li><img src="<%=basePath%>/images/shuliang@2x.png"></li>
				<li><p>数量</p></li>
				<li><input type="text" class="input_select" v-model="post_form.number"></li>
			</ul>
			<ul class="no_border">
				<li><img src="<%=basePath%>/images/miaoshu@2x.png"></li>
				<li><p>描述</p></li>
				<li class="clear atype"><textarea class="clear"
						placeholder="请详细描述借用用途" style="resize: none;" v-model="post_form.describe"></textarea></li>
			</ul>
		</div>
		<div class="line"></div>
		<div class="weui_btn_area clear" >
			<a href="javascript:" class="weui_btn bg-blue" @click="submitForm">提交</a>
		</div>
	</div>

	<script src="<%=basePath%>/js/vue.js"></script>
	<script>
		var vm = new Vue({
            el:'#main',
            data:{
            	  stock:0,
            	  types:[],
            	  names:[],
            	  attrs:[],
		          flag:{
		        	   alertOrHiddenBackgrond:'none',
		        	   alertOrHiddenTypeOption:'none',
		        	   alertOrHiddenNameOption:'none',
		        	   alertOrHiddenAttrOption:'none'
		          },
		          post_form:{
		        	    typeId:null,
		        	    typeName:null,
		        	    goodsNameId:null,
		        	    goodsName:null,
		        	    goodsAttrId:null,
		        	    goodsAttr:null,
		        	    cycleUse:null,
		        	    usedName:null,
		        	    usedPlace:null,
		        	    number:null,
		        	    describe:null
		          }
		    },
		    methods : {
		    	submitForm:function(){
		    		
		    		if(this.post_form.usedName == null || this.post_form.usedName == ''){
            			$.alert("请输入领用人","");
            		    return;
            		}
		    		if(this.types == null || this.types.length < 1){
            			$.alert("无类别可以选择","");
            		    return;
            		}
		    		if(this.post_form.typeId == null || this.post_form.typeId == ''){
            			$.alert("物品类型必须选择","");
            		    return;
            		}
		    		if(this.post_form.goodsNameId == null || this.post_form.goodsNameId == ''){
            			$.alert("物品名称必须选择","");
            		    return;
            		}
		    		if(this.post_form.goodsAttrId == null || this.post_form.goodsAttrId == ''){
            			$.alert("物品型号必须选择","");
            		    return;
            		}
		    		if(this.post_form.usedName == null || this.post_form.usedName == ''){
            			$.alert("领用人不能为空","");
            		    return;
            		}
		    		if(this.post_form.number == null || this.post_form.number == '' || this.post_form.number == 0){
            			$.alert("数量不能为空","");
            		    return;
            		}
		    		if(this.post_form.number  > this.stock){
            			$.alert("数量不能大于库存","");
            		    return;
            		}
		    		$.ajax({
						url : basePath + '/ls/school/property/outputRecord/add',
						type : 'post',
						dataType : 'json',
						data : {
							    goodsNameId:this.post_form.goodsNameId,
							    goodsAttrId:this.post_form.goodsAttrId,
								typeId:this.post_form.typeId,
								typeName:this.post_form.typeName,
								goodsName:this.post_form.goodsName,
								goodsAttr:this.post_form.goodsAttr,
								number:this.post_form.number,
								describe:this.post_form.describe,
								usedName:this.post_form.usedName,
								usedPlace:this.post_form.placeSite,
								cycleUse:this.post_form.cycleUse
						},
						success : function(data) {
							if (data.code == '000') {
									 window.location.href = (basePath + "/ls/school/property/consumablesApplyIndex?dateTime=" + new Date().getTime());
							} else {
								$.toptips(data.msg);
							}
						}
					});
		    	},
            	hiddenDiv:function(var1,var2){
            		//隐藏标签
            		this.flag.alertOrHiddenBackgrond = 'none'
            	    this.flag.alertOrHiddenTypeOption = 'none'
            		this.flag.alertOrHiddenNameOption = 'none'
            		this.flag.alertOrHiddenAttrOption = 'none'
            		
            			var dom = var1.target;
            		//类别
            		if(var2 === '0'){
            			this.post_form.typeId = dom.id
					    this.post_form.typeName = dom.innerHTML
					    this.post_form.cycleUse = dom.value
            		//名称	
            		}else if(var2 === '1'){
    			    	this.post_form.goodsNameId = dom.id;
    			    	this.post_form.goodsName = dom.innerHTML
            		//属性	
            		}else if(var2 === '2'){
            			this.post_form.goodsAttrId = dom.id;
			    		this.post_form.goodsAttr = dom.innerHTML;
			    		var param = {
			    				 		typeId:this.post_form.typeId,
			    				 		goodsNameId:this.post_form.goodsNameId,
			    				 		goodsAttrId:this.post_form.goodsAttrId,
			    				 		goodsState:0
			    				 };
			    		getStock(param);
            		}else{}
            	},
            	alertDiv: function(var2){
            		if(this.types == null || this.types.length < 1){
            			$.alert("无类别可以选择","");
            		    return;
            		}
            		//类别
            		if(var2 === '0'){
            			this.flag.alertOrHiddenBackgrond = 'block'
            			this.flag.alertOrHiddenTypeOption = 'block'
            		//名称
            		}else if(var2 === '1'){
            			if(this.post_form.typeId == null)
            				$.alert("请先选择物品类别","");
            			else{
            				var typeId = this.post_form.typeId;
    						for(var i = 0;i < this.types.length;i++){
    							if(this.types[i].id == typeId){
    								this.names = this.types[i].names;
    							}
    						}
    						if(this.names == null || this.names.length < 1){
    	            			$.alert("无物品可以选择","");
    	            		    return;
    	            		}
            			   this.flag.alertOrHiddenBackgrond = 'block'
            			   this.flag.alertOrHiddenNameOption = 'block'
            			}
            		//属性	
            		}else if(var2 === '2'){
            			if(this.post_form.goodsNameId == null)
            				$.alert("请先选择物品名称","");
            			else{
            				var nameId = this.post_form.goodsNameId;
    						for(var j = 0;j < this.names.length;j++){
    							if(this.names[j].id == nameId){
    								this.attrs = this.names[j].attrs;
    							}
    						}
    						if(this.attrs == null || this.attrs.length < 1){
    	            			$.alert("无型号可以选择","");
    	            		    return;
    	            		}
            			   this.flag.alertOrHiddenBackgrond = 'block'
            			   this.flag.alertOrHiddenAttrOption = 'block'
            			}   
            		}else{}
            	}
            }
		})
		//加载物品类型
		$(function() {
			getAllType();
		});
		function getAllType() {
			$.ajax({
				url : basePath + '/ls/school/property/type/all',
				type : 'post',
				dataType : 'json',
				data : {
					cycleUse : 0
				},
				success : function(data) {
					if (data.code == '000') {
						 vm.types = data.data;
					} else {
						$.toptips(data.msg);
					}
				}
			});
		}
		function getStock(param) {
			$.ajax({
				url : basePath + '/ls/school/property/stock/num/query',
				type : 'post',
				dataType : 'json',
				data : param,
				success : function(data) {
					if (data.code == '000') {
						if(data.data != null){
   							vm.stock = data.data.currentStock;
						}
					} else {
						$.toptips(data.msg);
					}
				}
			});
		}
	</script>
	<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
</body>
</html>
